<template>
  <div class="chart">
    <template v-if="!currentDayIsNotMealData">
      <RingChart
        :data="ringChartData"
      >
        <template #tips>
          <div class="chart-title">
            <div class="title">
              <span class="count">{{ mealPercent }}%</span>
              <!--        <span class="unit">人</span>-->
            </div>
            <div class="sub-title">
              <!--        {{ chartTitleOptions.subTitle }}-->
              就餐率
            </div>
          </div>
        </template>
      </RingChart>

      <div class="card__footer">
        <div class="meal-data">
          <div
            v-for="(item, index) in ringChartData"
            :key="index"
            class="meal-data__item"
          >
            <div
              class="block"
              :style="{
                'background-color': item.color
              }"
            />
            <div>{{ item.label }}：{{ item.value }}人</div>
          </div>
        </div>
      </div>
    </template>

    <template v-else>
      <div style="height: 200px;">
        <el-empty style="padding: 0" description="暂无用餐数据" />
      </div>
    </template>

  </div>
</template>
<script>
import RingChart from '@/views/repast/components/RingChart.vue'

export default {
  name: '',
  components: { RingChart },
  props: {
    data: {
      type: Object,
      default: () => []
    },
    ringChartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    }
  },
  computed: {
    mealPercent() {
      const { count, isEat } = this.data
      const percent = (isEat / count) * 100
      return percent.toFixed(2)
    },
    currentDayIsNotMealData() {
      const [isEat, notEat] = this.ringChartData
      return !isEat?.value && !notEat?.value
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
